<template>
    <div class="page-header">
        <van-nav-bar
            fixed
            placeholder
            border
            :title="title"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        >
            <template #left v-if="needLeft">
                <div class="btn">
                    <van-icon name="arrow-left" size="12" color="#fff" />
                    返回
                </div>
            </template>
            <template #right v-if="needRight">
                <div class="btn">{{ rightText }}</div>
            </template>
        </van-nav-bar>
    </div>
</template>

<script>
export default {
    name: 'pageHeader',
    data () {
        return {
            // title: null,
            // needHeaderLeft: null,
            // needHeaderRight: null
        }
    },
    props: ['title', 'needLeft', 'needRight', 'rightText'],
    methods: {
        onClickLeft () {
            this.$router.back()
        },
        onClickRight () {
            this.$emit('headerRightClick')
        }
    }
    // created () {
    //     this.title = this.$route.meta.title
    //     this.needHeaderLeft = this.$route.meta.needHeaderLeft
    //     this.needHeaderRight = this.$route.meta.needHeaderRight
    // }
}
</script>

<style lang="scss">
.page-header {
    .van-nav-bar__placeholder {
        height: 50px !important;
        .van-nav-bar {
            background-color: #000;
            height: 50px;
            .van-nav-bar__title {
                color: #fff;
                font-size: 18px;
            }
            .van-nav-bar__left {
                font-size: 12px;
                line-height: 12px;
                color: #fff;
            }
            .van-nav-bar__right {
                font-size: 12px;
                line-height: 12px;
                color: #fff;
            }
            .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 9px;
                background-color: #1c1c1c;
                border: 1px solid #0f0f0f;
                border-radius: 5px;
                .van-icon {
                    margin-right: 2px;
                }
            }
        }
    }
}
</style>
